<script setup lang="ts">
import {ref, reactive, inject, watch} from 'vue'
const { formData } = inject('sharedData')

const addTemplate = reactive({
	time: '',
	type: '',
	val: '',
	open: true,
	checked: false
})

console.log(formData)

const form = reactive({
	title: '标题',
	list: formData
})

watch(
	() => formData.value,
	(newVal) => {
		console.log('formData', newVal)
		setTimeout(() => {
			form.list = newVal;
		}, 50); // 50ms 延迟通常足够
	},
	{ deep: true }
);



const typeDic = ref([
	{
		label: '字符串',
		value: '0'
	},
	{
		label: '整数',
		value: '1'
	},
	{
		label: '数组',
		value: '2'
	}
])
const rules = reactive({
	title: [{ required: true, message: '请上传', trigger: 'blur' }]
})
const ruleForm = ref(null)

const table = ref(null);

const submitForm = () => {
	ruleForm.value.validate((valid) => {
		if (valid) {
			formData.value = form.list
		} else {
			return false
		}
	})
}
const resetForm = () => {
	ruleForm.value.resetFields()
}
</script>

<template>
	<el-form ref="ruleForm" :model="form" :rules="rules" label-width="100px">
		<sc-form-table  ref="table" :data="form.list" v-model="form.list"
						:addTemplate="addTemplate"
						drag-sort placeholder="暂无数据">
			<el-table-column prop="name" label="参数名称" width="180">
				<template #default="scope">
					<el-input v-model="scope.row.name"></el-input>
				</template>
			</el-table-column>
			<el-table-column prop="type" label="参数类型" width="180">
				<template #default="scope">
					<el-select v-model="scope.row.type" placeholder="请选择">
						<el-option
							v-for="item in typeDic"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						></el-option>
					</el-select>
				</template>
			</el-table-column>

			<el-table-column prop="open" label="是否必须" width="85" align="center">
				<template #default="scope">
					<el-checkbox v-model="scope.row.checked"></el-checkbox>
				</template>
			</el-table-column>
			<el-table-column prop="val" label="备注" min-width="180">
				<template #default="scope">
					<el-input v-model="scope.row.val" placeholder="请输入内容"></el-input>
				</template>
			</el-table-column>
		</sc-form-table>
		<el-form-item>
			<el-button type="primary" @click="submitForm">保存</el-button>
			<el-button @click="resetForm">重置</el-button>
		</el-form-item>
	</el-form>
</template>

<style scoped>

</style>
